<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣APP-购物车页面</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/app-public.css">
    <link rel="stylesheet" href="./css/app-shoppingCart.css">
</head>
<body>
    <div class="mobile">
        <header>
            <div class="functional_domain flexBox">
                <span class="close iconfont">&#xe679;</span>
                <span class="title">购物车</span>
            </div>
        </header>
        <main>
            <div class="hd flexBox">
                <div class="logo flexBox">
                    <span class="logoImg"></span>
                    <span class="iconfont close"></span>
                </div>
                <div class="headSelectAll flexBox">
                    <div class="checkBoxArea">
                        <span class="checkBox selectAll"></span>
                    </div>
                    <div class="info">豆小铺</div>
                </div>
            </div>
            <!-- 购物车商品列表 -->
            <div class="cartList flexBox">
                <div class="emptyCart">
                    你的购物车怎么是空的(╯｀□′)╯~ ╧╧
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="guessYouLike">
                <div class="head">你可能喜欢</div>
                <div class="content">
                    <div class="wares_area flexBox">
                        <div class="wares_area_left">
                            <div class="wares_item_l">
                                <div class="img"><img src="./img/app-market/snacks-2022101001-1.jpg" alt=""></div>
                                <div class="title">
                                    <span class="name">头厨小笼包烧麦组合装</span>
                                    <span class="description">头厨小笼包烧麦组合装</span>
                                </div>
                                <div class="price_addCart">
                                    <span class="price">
                                        <span class="new">¥<span class="num">69.9</span></span>
                                    </span>
                                </div>
                            </div>
                            <div class="wares_item_l">
                                <div class="img"><img src="./img/app-market/snacks-2022101002-1.jpg" alt=""></div>
                                <div class="title">
                                    <span class="name">密森基础洗护系列</span>
                                    <span class="description">密森基础洗护系列</span>
                                </div>
                                <div class="price_addCart">
                                    <span class="price">
                                        <span class="new">¥<span class="num">64.9</span></span>
                                    </span>
                                </div>
                            </div>
                            <div class="wares_item_l">
                                <div class="img"><img src="./img/app-market/snacks-2022101003-1.jpg" alt=""></div>
                                <div class="title">
                                    <span class="name">头厨嵊州老面小笼包</span>
                                    <span class="description">老面发酵纯手作，松软爆满，葱香四溢</span>
                                </div>
                                <div class="price_addCart">
                                    <span class="price">
                                        <span class="new">¥<span class="num">39.9</span></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="wares_area_right">
                            <div class="wares_item_l">
                                <div class="img"><img src="./img/app-market/snacks-2022101004-1.jpg" alt=""></div>
                                <div class="title">
                                    <span class="name">头厨苏州纸皮烧麦</span>
                                    <span class="description">皮薄个大，软糯鲜香，芝士/蛋黄口味</span>
                                </div>
                                <div class="price_addCart">
                                    <span class="price">
                                        <span class="new">¥<span class="num">69.9</span></span>
                                    </span>
                                </div>
                            </div>
                            <div class="wares_item_l">
                                <div class="img"><img src="./img/app-market/snacks-2022101006-1.jpg" alt=""></div>
                                <div class="title">
                                    <span class="name">密森海盐侧柏头皮净化膏</span>
                                    <span class="description">密森基础洗护系列</span>
                                </div>
                                <div class="price_addCart">
                                    <span class="price">
                                        <span class="new">¥<span class="num">99</span></span>
                                    </span>
                                </div>
                            </div>
                            <div class="wares_item_l">
                                <div class="img"><img src="./img/app-market/snacks-2022101005-1.jpg" alt=""></div>
                                <div class="title">
                                    <span class="name">喜善花房临安山核桃仁</span>
                                    <span class="description">临安原产种植，仅用当季新鲜饱满的核桃</span>
                                </div>
                                <div class="price_addCart">
                                    <span class="price">
                                        <span class="new">¥<span class="num">69.9</span></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>

        <footer>
            <div class="container flexBox">
                
            <div class="checkBoxArea flexBox">
                <span class="checkBox selectAll"></span>
                <span class="text">全选</span>
            </div>
            <div class="totalPrice">
                <span>不含运费</span>
                <span class="price">¥<span>0</span></span>
            </div>
            <div class="settleBtn">请选择</div>
            </div>
        </footer>
    </div>

    <script src="./lib//jquery-3.6.1.min.js"></script>
    <script>

        $(function(){
            // 数据渲染
            $.ajax({
                type:'get',
                url:'/getMyCart',
                async:false,
                success:function(res){
                    console.log('res',res);
                    var data = res.data.cart;

                    for(var i = 0; i<data.length; i++){
                        var item = data[i];

                        var productCartId = item.productCartId;
                        
                        var paramSpan = '';
                        item.params.forEach((item,index)=>{
                            paramSpan += `<span>${item}</span>`;
                        })

                        // 加减号是否禁用
                        var disabledClass = 'disabled'
                        if(item.quantity > 1) disabledClass = '';

                        var productItem = `<div class="productItem flexBox" data-product_id="${productCartId}">
                                                <div class="container flexBox">
                                                    <div class="checkBoxArea">
                                                        <span class="checkBox selectOne" data-type="selectOne"></span>
                                                    </div>
                                                    <div class="poster flexBox">
                                                        <div class="img">
                                                            <img src="${item.imgSrc}" alt="">
                                                        </div>
                                                    </div>
                                                    <div class="info flexBox">
                                                        <div class="name_param">
                                                            <div class="name">${item.name}</div>
                                                            <div class="param">
                                                                ${paramSpan}
                                                            </div>
                                                        </div>
                                                        <div class="priceCount flexBox">
                                                            <div class="price"> ¥ <span>${item.price}</span></div>
                                                            <div class="plus_minus flexBox">
                                                                <span class="minus iconfont ${disabledClass}" data-type="minus">&#xeb79;</span>
                                                                <span class="number">${item.quantity}</span>
                                                                <span class="plus iconfont" data-type="plus">&#xeb78;</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="deleteBtn">删除</div>
                                            </div>`;
                        $('.cartList').append(productItem);
                    }
                },
                error:function(err){
                    console.log('err',err);
                }
            })
        

            // 如果购物车是空的
            myCartEmpty();

            // 事件
            // 关闭按钮
            $('.close').on('click',function(){
                window.history.back();
            })

            
            var totalPrice = 0;   // 总价
            var totalCount = 0;   // 总数
            var unitPrice = 0;    // 单价

            function myCartEmpty(){
                if($('.productItem').length == 0){
                    $('.emptyCart').show();
                    $('.selectAll').removeClass('selected');
                }
                else{
                    $('.emptyCart').hide();
                }
            }

            // 加减号事件
            $('.plus_minus .minus').on('click',function(e){
                if($(this).hasClass('disabled') == false){
                    var number = $(this).siblings('.number').get(0).innerHTML;
                    if(number > 1){
                        number--;
                        $(this).siblings('.number').get(0).innerHTML = number;
                    }
                    if(number == 1){
                        $(this).addClass('disabled');
                    }
                
                    unitPrice = $(this).parents('.productItem').find('.price span').html();  // 单价
                    // 如果商品已经被选中
                    if($(this).parents('.productItem').find('.selectOne').hasClass('selected')){
                        totalPrice -= parseFloat(unitPrice).toFixed(1);
                        totalPrice = parseFloat(parseFloat(totalPrice).toFixed(1));
                        $('footer .price span').html(totalPrice);

                        totalCount--;
                        if(totalCount >= 1){
                            $('.settleBtn').addClass('canSettle');
                            $('.settleBtn').html(`结算(${totalCount})`);
                        }
                        else{
                            $('.settleBtn').removeClass('canSettle');
                            $('.settleBtn').html(`请选择`);
                        }
                        console.log(totalCount,totalPrice);
                    }
                }
                
            })
            $('.plus_minus .plus').on('click',function(e){
                if($(this).hasClass('disabled') == false){
                    $(this).siblings('.number').get(0).innerHTML++;
                    $(this).siblings('.minus').removeClass('disabled');

                    unitPrice = $(this).parents('.productItem').find('.price span').html();  // 单价
                    // 如果商品已经被选中
                    if($(this).parents('.productItem').find('.selectOne').hasClass('selected')){
                        
                        console.log(totalPrice,unitPrice);
                        totalPrice += parseFloat(parseFloat(unitPrice).toFixed(1));
                        console.log(totalPrice,unitPrice);
                        totalPrice = parseFloat(parseFloat(totalPrice).toFixed(1));
                        $('footer .price span').html(totalPrice);

                        totalCount++;
                        if(totalCount >= 1){
                            $('.settleBtn').addClass('canSettle');
                            $('.settleBtn').html(`结算(${totalCount})`);
                        }
                        else{
                            $('.settleBtn').removeClass('canSettle');
                            $('.settleBtn').html(`请选择`);
                        }

                        
                        console.log(totalCount,totalPrice);
                    }
                }
            })
            
            // 选中
            $('.selectOne').on('click',function(){
                console.log($(this));
                $(this).toggleClass('selected');

                var price = $(this).parents('.productItem').find('.price span').html();  // 单价
                var quantity = $(this).parents('.productItem').find('.number').html();   // 数量

                // 如果选中数量 == 商品个数  就全选 否则 就不全选
                if($('.selectOne.selected').length == $('.selectOne').length){
                    $('.selectAll').addClass('selected');
                }
                else{
                    $('.selectAll').removeClass('selected');
                }
                
                // 如果已选中
                if($(this).hasClass('selected')){
                    totalCount += parseFloat(quantity);
                    totalPrice += parseFloat((price * quantity).toFixed(1));
                    totalPrice = parseFloat(parseFloat(totalPrice).toFixed(1));
                    console.log(totalCount,totalPrice)
                    $('footer .price span').html(totalPrice);

                    $('.settleBtn').addClass('canSettle');
                    $('.settleBtn').html(`结算(${totalCount})`);
                }
                else{
                    totalCount -= parseFloat(quantity);
                    totalPrice -= (price * quantity).toFixed(1);
                    totalPrice = parseFloat(parseFloat(totalPrice).toFixed(1));
                    console.log(totalCount,totalPrice)
                    $('footer .price span').html(totalPrice);
                }
                // 总数
                if(totalCount != 0){
                    $('.settleBtn').addClass('canSettle');
                    $('.settleBtn').html(`结算(${totalCount})`);
                }
                else{
                    $('.settleBtn').removeClass('canSettle');
                        $('.settleBtn').html(`请选择`);
                }
                $('footer .price span').html(totalPrice);
            })

            // 全选按钮点击
            $('.selectAll').on('click',function(){
                if($(this).hasClass('selected')){
                    $('span.checkBox').removeClass('selected');
                    $('.settleBtn').removeClass('canSettle');

                    totalPrice = 0;
                    totalCount = 0
                    $('footer .price span').html(totalPrice);
                    $('.settleBtn').html('请选择');

                }
                else{
                    $('span.checkBox').addClass('selected');
                    $('.settleBtn').addClass('canSettle');

                    $('span.selectOne').each((index,item)=>{
                        var price = $(item).parents('.productItem').find('.price span').html();
                        var quantity = $(item).parents('.productItem').find('.number').html();
                        totalPrice += parseFloat(price * quantity);
                        totalCount += parseFloat(quantity);
                    })
                    console.log(totalPrice);

                    $('footer .price span').html(totalPrice);
                    $('.settleBtn').html(`结算(${totalCount})`);
                }
                
            })
        
            

            // 删除按钮点击事件
            $('.cartList .deleteBtn').on('click',function(){
                var productCartId = $(this).parents('.productItem').attr('data-product_id');
                console.log(productCartId);
                

                var price = $(this).parents('.productItem').find('.price span').html();  // 单价
                var quantity = $(this).parents('.productItem').find('.number').html();   // 数量
                // 如果已选中
                if($(this).parents('.productItem').find('.selectOne').hasClass('selected')){
                    // 总价
                    totalPrice -= (price * quantity).toFixed(1);
                    totalPrice = parseFloat(parseFloat(totalPrice).toFixed(1));
                    console.log(totalCount,totalPrice)
                    $('footer .price span').html(totalPrice);
                    
                    // 总数
                    totalCount -= parseFloat(quantity);
                    if(totalCount != 0){
                        $('.settleBtn').addClass('canSettle');
                        $('.settleBtn').html(`结算(${totalCount})`);
                    }
                    else{
                        $('.settleBtn').removeClass('canSettle');
                            $('.settleBtn').html(`请选择`);
                    }
                    $('footer .price span').html(totalPrice);
                    $(this).parents('.productItem').remove();
                }
                else{
                    $(this).parents('.productItem').remove();
                }
                
                myCartEmpty();

                // 发送请求 删除商品
                $.ajax({
                    type:'post',
                    data:{productCartId},
                    url:'/deleteMyCart',
                    success:function(res){
                        console.log('删除商品',res.status);
                    },
                    error:function(err){
                        console.log('err',err);
                    }
                })
            })
        })

    </script>
</body>
</html>